<template>
  <div>
    <el-table :header-cell-style="{ background: '#f5f6f6' }" :data="formPerms" border style="width: 100%">
      <el-table-column prop="title" show-overflow-tooltip label="表单字段">
        <template v-slot="scope">
          <span v-if="scope.row.required" style="color: #c75450"> * </span>
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="readOnly" label="只读" width="80">
        <template v-slot:header>
          <el-radio label="R" v-model="permSelect" @change="allSelect('R')">只读</el-radio>
        </template>
        <template v-slot="scope">
          <el-radio v-model="scope.row.perm" label="R" :name="scope.row.id"></el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="editable" label="可编辑" width="90">
        <template v-slot:header>
          <el-radio label="E" v-model="permSelect" @change="allSelect('E')">可编辑</el-radio>
        </template>
        <template v-slot="scope">
          <el-radio v-model="scope.row.perm" label="E" :name="scope.row.id"></el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="hide" label="隐藏" width="80">
        <template v-slot:header>
          <el-radio label="H" v-model="permSelect" @change="allSelect('H')">隐藏</el-radio>
        </template>
        <template v-slot="scope">
          <el-radio v-model="scope.row.perm" label="H" :name="scope.row.id"></el-radio>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup name="FormAuthorityConfig" lang="ts">
import { NODE_MODEL } from "@/components/Process/DefaultNodeProps";

const tableData = ref<Array<any>>([]);

const isIndeterminate = ref(false);

const permSelect = ref("");

const checkStatus = reactive({
  readOnly: true,
  editable: false,
  hide: false
});
const formData = computed((): any[] => {
  return NODE_MODEL.design.formItems;
});
// 表单权限
const formPerms = computed((): any[] => {
  return NODE_MODEL.selectedNode.props.formPerms;
});

const allSelect = (type: any): void => {
  permSelect.value = type;
  formPerms.value.forEach((f) => (f.perm = type));
};
const formPermsLoad = () => {
  let perms = NODE_MODEL.selectedNode.props.formPerms;
  formData.value.forEach((form: { id: any; title: any; }) => {
    let isLoad = false;
    for (let i in perms) {
      if (perms[i].id === form.id) {
        perms[i].title = form.title;
        isLoad = true;
        break;
      }
    }
    if (!isLoad) {
      perms.push({
        id: form.id,
        title: form.title,
        perm: NODE_MODEL.selectedNode.type === "ROOT" ? "E" : "R"
      });
    }
  });
};
const handleCheckAllChange = () => {
};
//监听
watch(formPerms, () => {
  const set = new Set(formPerms.value.map((f: any) => f.perm));
  permSelect.value = set.size === 1 ? Array.from(set.values())[0] : "";
}, { deep: true });
formPermsLoad();
</script>

<style lang="scss" scoped>
:deep(.el-table__row) {
  & > td:first-child {
    .cell {
      text-align: left;
    }
  }
  .cell {
    text-align: center;
  }
  .el-radio__label {
    display: none;
  }
}
</style>
